
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import GeekIcon from "@shared/geekIcon";
import React,{useState} from "react";
import useGuestChannels from "@pages/home/widgets/hooks/useGuestChannels";
import { useTypedSelector } from "@store/index";
import EditButton from "@pages/home/widgets/common/EditButton";
import { useTypedDispatch } from "@store/index";
import { removeGuestChannel } from "@slice/guestChannel";
import { SlideRef } from "@shared/slide";
interface Props {
  slideRef: React.RefObject<SlideRef | null>;
}
export default function Selected({ slideRef }: Props) {
    // 获取 dispatch 方法
  const dispatch = useTypedDispatch();
    // 获取访客频道列表
  const guestChannels = useGuestChannels()
  // 获取访客频道列表数量
  const guestChannelTotal = useTypedSelector((state) => state.guestChannelReducer.ids.length);
  // 控制 EditButton 的编辑状态 (双向数据绑定)
  const [editing, setEditing] = useState(false);
  return (
    <>
      <div className={styles.title}>
        <h3>我的频道</h3>
        <h4>点击进入频道</h4>
        <EditButton render={guestChannelTotal > 4} value={editing} onChange={setEditing} />
      </div>
      <div className={styles.list}>
      {guestChannels.map((channel) => (
        <span key={channel.id}>
          {channel.name} {editing && Number(channel.id) !== 0 && <GeekIcon type={"iconbtn_tag_close"} onClick={() => dispatch(removeGuestChannel(channel.id))} />}
        </span>
      ))}
    </div>
    </>
  );
}